<link rel="stylesheet" href="/css/wechat/menu.css">

<div class="panel-body">
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade active in" id="one">
            <div class="widget-body no-padding">
                <div class="weixin-menu-setting clearfix">
                    <div class="mobile-menu-preview">
                        <div class="mobile-head-title">校朋EDUPAL激励平台</div>
                        <ul class="menu-list" id="menu-list">
                            @foreach(json_decode($config_menu->value, true) as $i => $first)
                            <li id="menu-{{$i}}" class="menu-item" data-type="{{@$first['type']}}" data-key="{{@$first['key']}}" data-name="{{@$first['name']}}" data-url="{{@$first['url']}}" data-appid="{{@$first['appid']}}" data-pagepath="{{@$first['pagepath']}}">
                                <a href="javascript:;" class="menu-link">
                                    <i class="icon-menu-dot"></i> <i class="weixin-icon sort-gray"></i> <span class="title">{{$first['name']}}</span>
                                </a>

                                <div class="sub-menu-box" style="display: none;">
                                    <ul class="sub-menu-list">
                                        @if(isset($first['sub_button']) && $first['sub_button'])
                                            @foreach($first['sub_button'] as $j=>$second)
                                                <li id="sub-menu-{{$j}}" class="sub-menu-item" data-type="{{@$second['type']}}" data-key="{{@$second['key']}}" data-name="{{@$second['name']}}" data-url="{{@$second['url']}}" data-appid="{{@$second['appid']}}" data-pagepath="{{@$second['pagepath']}}"> <a href="javascript:;"> <i class="weixin-icon sort-gray"></i><span class="sub-title">{{@$second['name']}}</span></a> </li>
                                            @endforeach
                                        @endif
                                        <li class="add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"></i></span></a></li>
                                    </ul>
                                    <i class="arrow arrow-out"></i> <i class="arrow arrow-in"></i>
                                </div>
                            </li>
                            @endforeach
                            <li class="add-item extra" id="add-item">
                                <a href="javascript:;" class="menu-link" title="添加菜单"><i class="weixin-icon add-gray"></i></a>
                            </li>
                        </ul>
                    </div>
                    <div class="weixin-body">
                        <div class="weixin-content" style="display:none">
                            <div class="item-info">
                                <form id="form-item" class="form-item" data-value="" >
                                    <div class="item-head">
                                        <h4 id="current-item-name">添加子菜单</h4>
                                        <div class="item-delete"><a href="javascript:;" id="item_delete">删除菜单</a></div>
                                    </div>
                                    <div style="margin-top: 20px;" id="item-body">

                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="no-weixin-content">
                            点击左侧菜单进行编辑操作
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 text-center text-danger">
                        <i class="fa fa-lightbulb-o"></i> <small>可直接拖动菜单排序</small>
                    </div>
                    <div class="col-xs-8 text-center">
                        <div class="text-center"><a href="javascript:;" id="menuSyn" class="btn btn-danger">保存并发布</a></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                <h4 class="modal-title">选择资源</h4>
            </div>
            <div class="modal-body">
                <div class="box" style="border-top:none;">

                    <div class="box-header with-border">
                        <div class="pull-right">

                        </div>
                        <span>
                            <a class="btn btn-sm btn-primary grid-refresh" title="刷新">
                                <i class="fa fa-refresh"></i>
                                <span class="hidden-xs"> 刷新</span>
                            </a>
                            <div class="btn-group" style="margin-right: 10px" data-toggle="buttons">
                                <label class="btn btn-sm btn-dropbox filter-btn" title="筛选">
                                    <input type="checkbox"><i class="fa fa-filter"></i><span class="hidden-xs">&nbsp;&nbsp;筛选</span>
                                </label>
                            </div>
                        </span>
                    </div>

                    <div class="box-header with-border hide" id="filter-box">
                        <form class="form-horizontal" pjax-container="">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="box-body">
                                        <div class="fields-group">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label"> 手机号</label>
                                                <div class="col-sm-8">
                                                    <div class="input-group input-group-sm">
                                                        <div class="input-group-addon">
                                                            <i class="fa fa-pencil"></i>
                                                        </div>

                                                        <input type="text" class="form-control telephone" placeholder="手机号" name="telephone" value="">
                                                    </div>    </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label"> 用户昵称</label>
                                                <div class="col-sm-8">
                                                    <div class="input-group input-group-sm">
                                                        <div class="input-group-addon">
                                                            <i class="fa fa-pencil"></i>
                                                        </div>

                                                        <input type="text" class="form-control username" placeholder="用户昵称" name="username" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-2"></div>
                                        <div class="col-md-8">
                                            <div class="btn-group pull-left">
                                                <button class="btn btn-info submit btn-sm"><i class="fa fa-search"></i>&nbsp;&nbsp;搜索</button>
                                            </div>
                                            <div class="btn-group pull-left " style="margin-left: 10px;">
                                                <a href="http://xp-admin.cc/user/account?_pjax=%23pjax-container" class="btn btn-default btn-sm"><i class="fa fa-undo"></i>&nbsp;&nbsp;重置</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding" id="response-list">

                    </div>
                    <div class="box-footer clearfix">
                        总共 <b>70</b> 条
                        <ul class="pagination pagination-sm no-margin pull-right">
                            <!-- Previous Page Link -->
                            <li class="page-item disabled"><span class="page-link">«</span></li>
                            <!-- Array Of Links -->
                            <li class="page-item active"><span class="page-link">1</span></li>
                            <li class="page-item"><a class="page-link" href="http://xp-admin.cc/user/account?_pjax=%23pjax-container&amp;page=2">2</a></li>
                            <li class="page-item"><a class="page-link" href="http://xp-admin.cc/user/account?_pjax=%23pjax-container&amp;page=3">3</a></li>
                            <li class="page-item"><a class="page-link" href="http://xp-admin.cc/user/account?_pjax=%23pjax-container&amp;page=4">4</a></li>

                            <!-- Next Page Link -->
                            <li class="page-item"><a class="page-link" href="http://xp-admin.cc/user/account?_pjax=%23pjax-container&amp;page=2" rel="next">»</a></li>
                        </ul>

                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
            <div class="modal-footer">
                {{--<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary btn-sm">提交</button>--}}
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<script type="text/javascript">
    var menu = {!! $config_menu->value !!};
    var responselist = {!! json_encode($response_list) !!};
</script>

<script src="/js/template.min.js"></script>
<script src="/js/sortable.js"></script>

<script>
    $(function() {

        var typeList = [
            {name: "click", title: "发送消息"},
            {name: "view", title: "跳转网页"},
            {name: "miniprogram", title: "跳转小程序"},
            {name: "scancode_push", title: "扫码推"},
            {name: "scancode_waitmsg", title: "扫码推提示框"},
            {name: "pic_sysphoto", title: "拍照发图"},
            {name: "pic_photo_or_album", title: "拍照相册发图"},
            {name: "pic_weixin", title: "相册发图"},
            {name: "location_select", title: "地理位置选择"},
        ];

        //$("#menu-list").html(init_menu(menu));

        //拖动排序
        new Sortable($("#menu-list")[0], {draggable: 'li.menu-item'});
        //子菜单拖动排序
        $(".sub-menu-list").each(function () {
            new Sortable(this, {draggable: 'li.sub-menu-item'});
        });
        //添加主菜单
        $(document).on('click', '#add-item', function () {
            var menu_item_total = $(".menu-item").size();
            if (menu_item_total < 3) {
                var item = '<li class="menu-item" data-type="click" data-key="" data-name="添加菜单" > <a href="javascript:;" class="menu-link"> <i class="icon-menu-dot"><\/i> <i class="weixin-icon sort-gray"><\/i> <span class="title">添加菜单<\/span> <\/a> <div class="sub-menu-box" style=""> <ul class="sub-menu-list"><li class=" add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"><\/i><\/span><\/a><\/li> <\/ul> <i class="arrow arrow-out"><\/i> <i class="arrow arrow-in"><\/i> <\/div><\/li>';
                var itemDom = $(item);
                itemDom.insertBefore(this);
                itemDom.trigger("click");
                $(".sub-menu-box", itemDom).show();
                new Sortable($(".sub-menu-list", itemDom)[0], {draggable: 'li.sub-menu-item'});
            }
        });
        //切换类型
        $(document).on('change', 'input[name=type]', function () {
            $(".sub-menu-item.current,.menu-item.current").data("type", $(this).val()).trigger("click");
        });
        //删除菜单
        $(document).on('click', '#item_delete', function () {
            var current = $("#menu-list li.current");
            var prev = current.prev("li[data-type]");
            var next = current.next("li[data-type]");

            if (prev.size() == 0 && next.size() == 0 && $(".sub-menu-box", current).size() == 0) {
                last = current.closest(".menu-item");
            } else if (prev.size() > 0 || next.size() > 0) {
                last = prev.size() > 0 ? prev : next;
            } else {
                last = null;
                $(".weixin-content").hide();
                $(".no-weixin-content").show();
            }
            $("#menu-list li.current").remove();
            if (last) {
                last.trigger('click');
            } else {
                $("input[name='name']").val('');
            }
            updateChangeMenu();
        });
        //更新修改与变动
        var updateChangeMenu = function () {
            var item = $("#menu-list li.current");
            var values = $("#form-item").serializeArray();
            $.each(values, function (i, j) {
                if (j.name == 'name') {
                    $(">a", item).html(j.value);
                }
                item.data(j.name, j.value);
            });
            menuUpdate();
        };
        //更新菜单数据
        var menuUpdate = function () {
            $.post("/wechat/menu/edit", {menu: JSON.stringify(getMenuList()), _token : LA.token}, function (data) {
                if (data['code'] == 1) {
                } else {
                    Toastr.error(__('Operation failed'));
                }
            }, 'json');
        };
        //获取菜单数据
        var getMenuList = function () {
            var menus = [];
            var sub_button = [];
            var menu_i = 0;
            var sub_menu_i = 0;
            var item;
            $("#menu-list li").each(function (i) {
                item = $(this);
                var name = item.data('name');
                if (name != null) {
                    if (item.hasClass('menu-item')) {
                        sub_menu_i = 0;
                        if (item.find('.sub-menu-item').size() > 0) {
                            menus[menu_i] = {"name": name, "sub_button": "sub_button"}
                        } else {
                            menus[menu_i] = $(this).data();
                        }
                        if (menu_i > 0) {
                            menus[menu_i - 1]['sub_button'] = menus[menu_i - 1]['sub_button'] == "sub_button" ? sub_button : menus[menu_i - 1]['sub_button'];
                        }
                        sub_button = [];
                        menu_i++;
                    } else {
                        sub_button[sub_menu_i++] = $(this).data();
                    }
                }
            });
            if (sub_button.length > 0) {
                var len = menus.length;
                menus[len - 1]['sub_button'] = sub_button;
            }
            return menus;
        };
        //添加子菜单
        $(document).on('click', ".add-sub-item", function () {
            var sub_menu_item_total = $(this).parent().find(".sub-menu-item").size();
            if (sub_menu_item_total < 5) {
                var item = '<li class="sub-menu-item" data-type="click" data-key="" data-name="添加子菜单"><a href="javascript:;"><span class=" "><i class="weixin-icon sort-gray"><\/i><span class="sub-title">添加子菜单<\/span><\/span><\/a><\/li>';
                var itemDom = $(item);
                itemDom.insertBefore(this);
                itemDom.trigger("click");
                if (sub_menu_item_total == 4) {
                    $(this).hide();
                }
            }
            return false;
        });

        //主菜单子菜单点击事件
        $(document).on('click', ".menu-item, .sub-menu-item", function () {
            var hasChild = $(".sub-menu-item", this).size() > 0 ? true : false;
            if ($(this).hasClass("sub-menu-item")) {
                $("#menu-list li").removeClass('current');
            } else {
                $("#menu-list li").removeClass('current');
                $("#menu-list > li").not(this).find(".sub-menu-box").hide();

                $(".sub-menu-box", this).show();
            }
            $(this).addClass('current');

            var data = $.extend({}, $(this).data());
            data.keytitle = data.key && typeof responselist[data.key] != 'undefined' ? responselist[data.key] : '';
            data.typeList = typeList;
            data.hasChild = hasChild;
            data.first = $(this).hasClass("menu-item") ? true : false;
            $(".weixin-content").show();
            $(".no-weixin-content").hide();
            //$("#item-body").html(template("itemtpl", data));
            $("#item-body").html(init_item(data));

            return false;
        });
        //触发保存
        $("form#form-item").on('change', "input,textarea", function () {
            updateChangeMenu();
        });
        //点击同步
        $(document).on('click', "#menuSyn", function () {
            $.post("/wechat/menu/sync", {_token:LA.token}, function (ret) {
                var msg = ret.hasOwnProperty("message") && ret.message != "" ? ret.message : "";
                if (ret.status_code == 1) {
                    toastr.success('菜单同步更新成功，生效时间看微信官网说明，或者你重新关注微信号！');
                } else {
                    toastr.error(msg ? msg : '发布失败');
                }
            }, 'json');
        });
        //刷新资源
        var refreshkey = function (data) {
            responselist[data.eventkey] = data.title;
            $("input[name=key]").val(data.eventkey).trigger("change");
            $("#menu-list li.current").trigger("click");
        };
        //选择资源
        $(document).on('click', "#select-resources", function () {
            var key = $("#key").val();
            var token = $("#token").val();
            $.post("/wechat/response/select", {_token:LA.token}, function (res) {

                var response_list = template.render("responsetpl", res);
                $("#response-list").html(response_list);

            });

            return false;
        });
        //添加资源
        $(document).on('click', "#add-resources", function () {
            Backend.api.open($(this).attr("href") + "?key=" + key, __('Add'), {
                callback: refreshkey
            });
            return false;
        });

        $("#menu-list li.menu-item:first").trigger("click");

        $('#response-list').delegate('.btn-chooseone', 'click',function () {
            var title = $(this).data('title'),key = $(this).data('key');

            refreshkey({eventkey:key,title:title});

            $('button[data-dismiss="modal"]').trigger('click');

        });
        
        function init_menu(menu) {

            var html = '';
            $.each(menu, function (i,first) {
                console.log(first)
                html += '<li id="menu-'+i+'" class="menu-item" data-type="'+first['type']+'" data-key="'+first['key']+'" data-name="'+first['name']+'" data-url="'+first['url']+'" data-appid="'+first['appid']+'" data-pagepath="'+first['pagepath']+'">';
                html += '<a href="javascript:;" class="menu-link"><i class="icon-menu-dot"><\/i> <i class="weixin-icon sort-gray"><\/i> <span class="title">'+first['name']+'<\/span><\/a>';
                html += '<div class="sub-menu-box" style="display:none;"><ul class="sub-menu-list">';
                if(first.sub_button) {
                    $.each(first.sub_button, function (j,second) {
                        html += '<li id="sub-menu-'+j+'" class="sub-menu-item" data-type="'+second['type']+'" data-key="'+second['key']+'" data-name="'+second['name']+'" data-url="'+second['url']+'" data-appid="'+second['appid']+'" data-pagepath="'+second['pagepath']+'"> <a href="javascript:;"> <i class="weixin-icon sort-gray"><\/i><span class="sub-title">'+second['name']+'<\/span><\/a> <\/li>';
                    })
                }
                html += '<li class="add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"><\/i><\/span><\/a><\/li>';
                html += '<\/ul><i class="arrow arrow-out"><\/i> <i class="arrow arrow-in"><\/i><\/div><\/li>';

            });

            html += '<li class="add-item extra" id="add-item"><a href="javascript:;" class="menu-link" title="添加菜单"><i class="weixin-icon add-gray"><\/i><\/a><\/li>';

            return html;
        }

        function init_item(data) {

            var html = '<dl><dt id="current-item-option"><span class="is-sub-item ';
            if (data.first) {
                html += 'hidden';
            }
            html += '">子<\/span>菜单标题：<\/dt> <dd><div class="input-box"><input id="item_title" name="name" type="text" value="' + data.name + '"><\/div><\/dd><\/dl>';

            if(!data.hasChild) {
                html += '<dl class="is-item"><dt id="current-item-type"><span class="is-sub-item ';
                if (data.first) {
                    html += 'hidden';
                }
                html += '">子<\/span>菜单内容：<\/dt><dd>';

                $.each(data.typeList, function (i,value) {
                    html += '<input id="type'+i+'" type="radio" name="type" value="'+value.name+'" ';
                    if(value.name == data.type){
                        html += 'checked';
                    }
                    html += '\/><label for="type'+i+'"><span class="lbl_content">'+value.title+'<\/span><\/label>';
                });
                html += '<\/dd><\/dl><div id="menu-content" class="is-item">';

                if (data.type === 'view') {
                    html += '<div class="viewbox is-view"> <p class="menu-content-tips">点击该<span class="is-sub-item ';
                    if (data.first) {
                        html += 'hidden';
                    }
                    html += '">子<\/span>菜单会跳到以下链接<\/p><dl><dt>页面地址：<\/dt><dd><div class="input-box"><input type="text" name="url" value="'+data.url+'"><\/div><\/dd><\/dl><\/div>';
                }

                if (data.type !== 'view' && data.type !== 'miniprogram') {
                    html += '<div class="clickbox is-click"><input type="hidden" name="key" id="key" value="'+data.key+'" \/><span class="create-click">';
                    if (data.keytitle) {
                        html += '<div class="keytitle">资源名:'+data.keytitle+'<\/div>';
                    }
                    html += '<a href="#" id="select-resources" data-toggle="modal" data-target="#myModal"><i class="weixin-icon big-add-gray"><\/i><strong>选择资源<\/strong><\/a><\/span><\/div>';
                }

                if (data.type === 'miniprogram') {
                    html += '<div class="viewbox is-miniprogram"><p class="menu-content-tips">点击该<span class="is-sub-item ';

                    if (data.first) {
                        html += 'hidden';
                    }

                    html += '">子<\/span>菜单会跳到以下小程序<\/p><dl><dt>小程序ID：<\/dt><dd><div class="input-box"><input type="text" id="appid" name="appid" placeholder="在小程序后台获取" value="'+data.appid+'"><\/div><\/dd><\/dl>';

                    html += '<dl><dt>小程序页面路径：<\/dt><dd><div class="input-box"><input type="text" id="pagepath" name="pagepath" placeholder="小程序页面路径" value="'+data.pagepath+'"><\/div><\/dd><\/dl>';
                    html += '<dl><dt>页面地址：<\/dt><dd><div class="input-box"><input type="text" name="url" placeholder="页面地址，当不支持小程序时会跳转此页面" value="'+data.url+'"><\/div><\/dd><\/dl><\/div>';
                }

            }


            return html;

        }


    });
</script>

<script type="text/html" id="responsetpl">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>类型</th>
                <th>资源标题</th>
                <th>事件标识</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <% for (var i in data) { %>
                <tr>
                    <td>
                        <%=data[i].id%>
                    </td>
                    <td>
                        <%=data[i].type%>
                    </td>
                    <td>
                        <%=data[i].title%>
                    </td>
                    <td>
                        <%=data[i].eventkey%>
                    </td>
                    <td>
                        <a href="javascript:;" class="btn btn-danger btn-chooseone btn-xs" data-title="<%=data[i].title%>" data-key="<%=data[i].eventkey%>"><i class="fa fa-check"></i> 选择</a>
                    </td>
                </tr>
            <% } %>
        </tbody>
    </table>
</script>





